<template>
    <div class="teacherAttendance">
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="我的请假" name="leaveRequest">
                我的请假
                <el-row>
                    <el-col :span="24">
                        <div>
                            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item>
                                    <el-date-picker v-model="formInline.approvalDate" value-format="yyyy-MM-dd"
                                        type="date" placeholder="申请时间">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item>
                                    <el-date-picker v-model="formInline.leaveDate" value-format="yyyy-MM-dd" type="date"
                                        placeholder="请假时间">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="formInline.teacherType" placeholder="请假类型">
                                        <el-option v-for="item in gradeOptions" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="formInline.approvalStatus" placeholder="审批状态">
                                        <el-option label="待审批" value="1"></el-option>
                                        <el-option label="审批通过" value="2"></el-option>
                                        <el-option label="审批驳回" value="3"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" icon="el-icon-search"
                                        @click="findTeacherAttendancePagination()">搜索</el-button>
                                    <el-button icon="el-icon-refresh" @click="onReset()">重置</el-button>
                                    <el-button type="text"
                                        @click="(dialogVisible = true), (attTitle = '申请请假'), clearDialog()">申请请假</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div style="margin-top:10px;">
                            <el-table :data="tableData" border height="350">
                                <el-table-column prop="shDepartment.deptName" label="部门" width="100" align="center">
                                </el-table-column>
                                <el-table-column prop="sysUser.nickName" label="姓名" width="100" align="center">
                                </el-table-column>
                                <el-table-column prop="timeOn" label="开始时间" width="200" align="center">
                                </el-table-column>
                                <el-table-column prop="timeEnd" label="结束时间" width="200" align="center">
                                </el-table-column>
                                <el-table-column prop="teacherReaso" label="请假原因" width="100" align="center">
                                </el-table-column>
                                <el-table-column prop="teacherType" label="请假类型" width="100" align="center">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.teacherType == 1">事假</span>
                                        <span v-if="scope.row.teacherType == 2">病假</span>
                                        <span v-if="scope.row.teacherType == 3">调休</span>
                                        <span v-if="scope.row.teacherType == 4">产假</span>
                                        <span v-if="scope.row.teacherType == 5">陪产假</span>
                                        <span v-if="scope.row.teacherType == 6">婚假</span>
                                        <span v-if="scope.row.teacherType == 7">丧假</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="approvalTime" label="请假申请时间" width="200" align="center">
                                </el-table-column>
                                <el-table-column prop="approvalStatus" label="审批状态" width="100" align="center">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.approvalStatus == 0">已撤销</span>
                                        <span v-if="scope.row.approvalStatus == 1">待审批</span>
                                        <span v-if="scope.row.approvalStatus == 2">审批通过</span>
                                        <span v-if="scope.row.approvalStatus == 3">审批驳回</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="roleName" label="操作" width="130" align="center">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.approvalStatus == 1">
                                            <el-button @click="upAttendance(scope.row)" type="text"
                                                size="small">撤销</el-button>
                                        </span>
                                        <span v-if="scope.row.approvalStatus != 1">/</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <div class="block">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                    :current-page="pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
                                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                                </el-pagination>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-dialog title="请假原因" :visible.sync="dialogFormVisible">
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                    </div>
                </el-dialog>
                <!-- 新增弹框 -->
                <el-dialog :title="attTitle" :visible.sync="dialogVisible" width="700px">
                    <el-form :model="attendance" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="请假类型">
                            <el-select v-model="attendance.teacherType" placeholder="请选择">
                                <el-option v-for="item in gradeOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="请假时间">
                            <el-date-picker v-model="attendance.timeOn" value-format="yyyy-MM-dd" type="date">
                            </el-date-picker>
                            -
                            <el-date-picker v-model="attendance.timeEnd" value-format="yyyy-MM-dd" type="date">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="请假原因">
                            <el-input v-model="attendance.teacherReaso"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="ifDialog()">确 定</el-button>
                        <el-button @click="(dialogVisible = false), clearDialog()">取 消</el-button>
                    </span>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="请假审批" name="leaveApproval">
                请假审批
                <el-row>
                    <el-col :span="24">
                        <div>
                            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item>
                                    <el-date-picker v-model="daterange" type="datetime" placeholder="申请时间">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item>
                                    <el-date-picker v-model="daterange" type="datetime" placeholder="请假时间">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="formInline.status" placeholder="请假类型">
                                        <el-option label="正常" value="0"></el-option>
                                        <el-option label="停用" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="formInline.status" placeholder="审批状态">
                                        <el-option label="正常" value="0"></el-option>
                                        <el-option label="停用" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" icon="el-icon-search"
                                        @click="findTeacherAttendancePagination()">搜索</el-button>
                                    <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div style="margin-top:10px;">
                            <el-table :data="ask" border height="350">
                                <el-table-column prop="roleName" label="部门" width="100" align="center">
                                </el-table-column>
                                <el-table-column prop="roleName" label="姓名" width="100" align="center">
                                </el-table-column>
                                <el-table-column prop="roleName" label="开始时间" width="200" align="center">
                                </el-table-column>
                                <el-table-column prop="roleName" label="结束时间" width="200" align="center">
                                </el-table-column>
                                <el-table-column prop="roleName" label="请假类型" width="100" align="center">
                                </el-table-column>
                                <el-table-column prop="roleName" label="请假申请时间" width="200" align="center">
                                </el-table-column>
                                <el-table-column prop="roleName" label="审批状态" width="200" align="center">
                                </el-table-column>
                                <el-table-column prop="roleName" label="操作" width="130" align="center">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <div class="block">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                    :current-page="pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
                                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                                </el-pagination>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="考勤统计" name="attendanceStatistics">
                考勤统计
                <el-row>
                    <el-col :span="24">
                        <div>
                            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item>
                                    <el-input v-model="formInline.userName" placeholder="请输入学生名称"></el-input>
                                </el-form-item>
                                <!-- <el-form-item>
                                    <el-select v-model="formInline.status" placeholder="学期考勤">
                                        <el-option label="正常" value="0"></el-option>
                                        <el-option label="停用" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="formInline.status" placeholder="月份考勤">
                                        <el-option label="正常" value="0"></el-option>
                                        <el-option label="停用" value="1"></el-option>
                                    </el-select>
                                </el-form-item> -->
                                <el-form-item>
                                    <el-button type="primary" icon="el-icon-search"
                                        @click="searchUserList">搜索</el-button>
                                    <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                        <el-col :span="24">
                            <div style="margin-top:10px;">
                                <el-table :data="att" border height="350">
                                    <el-table-column prop="departmentName" label="部门" width="100" align="center">
                                    </el-table-column>
                                    <el-table-column prop="userName" label="姓名" width="100" align="center">
                                    </el-table-column>
                                    <el-table-column prop="attendanceDay" label="实际出勤天数" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="beLate" label="迟到次数" width="100" align="center">
                                    </el-table-column>
                                    <el-table-column prop="leaveEarly" label="早退次数" width="100" align="center">
                                    </el-table-column>
                                    <el-table-column prop="absence" label="缺卡次数" width="100" align="center">
                                    </el-table-column>
                                    <el-table-column prop="fieldPersonnelDay" label="外勤天数" width="100" align="center">
                                    </el-table-column>
                                    <el-table-column prop="askForLeaveDay" label="请假次数" width="100" align="center">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">
                                <div class="block">
                                    <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="pageNum"
                                        :page-sizes="[10, 20, 30, 50]"
                                        :page-size="pageSize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="total">
                                    </el-pagination>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
            </el-tab-pane>
            <el-tab-pane label="考勤时间设置" name="attendance">
                考勤时间设置
                <el-row>
                    <el-col :span="24">
                        <div>
                            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item>
                                    <el-select v-model="formInline.status" placeholder="学期考勤">
                                        <el-option label="正常" value="0"></el-option>
                                        <el-option label="停用" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" icon="el-icon-search"
                                        @click="findTeacherAttendancePagination()">搜索</el-button>
                                    <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
                                    <el-button type="text" @click="addgz">添加规则</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div style="margin-top:10px;">
                            <el-table :data="tableData" border height="350">
                                <el-table-column prop="roleName" label="考勤学年" width="100" align="center">
                                </el-table-column>
                                <el-table-column prop="roleName" label="考勤学期" width="100" align="center">
                                </el-table-column>
                                <el-table-column prop="roleName" label="学期开始时间" width="200" align="center">
                                </el-table-column>
                                <el-table-column prop="roleName" label="学期结束时间" width="200" align="center">
                                </el-table-column>
                                <el-table-column prop="roleName" label="考勤开始时间" width="200" align="center">
                                </el-table-column>
                                <el-table-column prop="roleName" label="考勤结束时间" width="200" align="center">
                                </el-table-column>
                                <el-table-column prop="roleName" label="操作" width="100" align="center">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <div class="block">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                    :current-page="pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
                                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                                </el-pagination>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import { getToken } from '@/utils/auth';
import axios from 'axios';

export default {
    name: "TeacherAttendance",
    data() {
        return {
            // 默认第一个页面
            activeName: "leaveRequest",
            //条查
            formInline: {
                teacherType: "",
                approvalStatus: '',
                leaveDate: '',
                approvalDate: ''
            },
            attendance: {
                id: "",
                userId: "",
                img: "",
                teacherType: "",
                timeOn: "",
                timeEnd: "",
                teacherReaso: "",
                approvalStatus: "",
                approvalTime: "",
                approvalReaso: "",
                createBy: "",
                createTime: "",
                updateBy: "",
                updateTime: ""
            },
            // 分页
            pageNum: 1,
            pageSize: 10,
            total: 0,
            // 时间
            daterange: [],
            //考勤时间设置
            tableData: [],
            //请假类型
            gradeOptions: [
                {
                    value: 1,
                    label: "事假",
                },
                {
                    value: 2,
                    label: "病假",
                },
                {
                    value: 3,
                    label: "调休",
                },
                {
                    value: 4,
                    label: "产假",
                },
                {
                    value: 5,
                    label: "陪产假",
                },
                {
                    value: 6,
                    label: "婚假",
                },
                {
                    value: 7,
                    label: "丧假",
                },
            ],
            attTitle: "",
            // 我的请假
            aaa: [],
            // 请假审批
            ask: [],
            // 考勤统计
            att: [],
            // 查询请假原因
            dialogFormVisible: false,
            //申请请假
            dialogVisible: false,
        }
    },
    created() {
        this.findTeacherAttendancePagination();
    },
    methods: {
        handleClick(tab) {

            if (tab.name == "leaveApproval") {
                //请假审批
                this.findleaveApproval()
            } if (tab.name == "attendanceStatistics") {
                //考勤统计
                this.findattendanceStatistics()
            } if (tab.name == "attendance") {
                //考勤时间设置
                this.findattendance()
            }
        },
        //我的请假
        findTeacherAttendancePagination() {
            console.log("fine" + this.formInline.approvalDate)
            axios
                .post(
                    "/api/manager/attendance/findTeacherAttendancePagination?pageNum=" +
                    this.pageNum +
                    "&pageSize=" +
                    this.pageSize,
                    this.formInline
                )
                .then((res) => {
                    console.log(res.data.data)
                    // console.log(res)
                    this.tableData = res.data.data.items;
                    this.total = res.data.data.totalElements;
                });
        },
        //申请请假
        addUser() {
            this.attendance.createBy = localStorage.getItem('nickName');
            this.attendance.updateBy = localStorage.getItem('nickName');
            this.attendance.userId = localStorage.getItem('thisUserId');
            axios.post("/api/manager/attendance/addTeacherAttendance", this.attendance).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: "恭喜你，" + res.data.message,
                        type: "success",
                    });
                    this.dialogVisible = false;
                    this.clearDialog();
                    this.findTeacherAttendancePagination();
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },
        // dialog 表单提交后清空表单
        clearDialog() {
            for (let key in this.attendance) {
                if (this.attendance.hasOwnProperty(key)) {
                    // 确保属性是对象自身的，而不是继承的
                    this.attendance[key] = ""; // 或者设置为 null
                }
            }
        },
        // 判断 title 提交 新增/修改 方法
        ifDialog() {
            if (this.attTitle == "申请请假") {
                this.addUser();
            }
            if (this.attTitle == "编辑请假") {
            }
        },
        upAttendance(row) {
            if (confirm("确定要撤销这条请假申请嘛!")) {
                this.attendance = row;
                this.attendance.approvalStatus = 0;
                console.log(this.attendance)
                axios.post("/api/manager/attendance/updateTeacherAttendance", this.attendance).then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: "恭喜你，" + res.data.message,
                            type: "success",
                        });
                        this.findTeacherAttendancePagination();
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            }
        },
        //请假审批
        findleaveApproval() {

        },
        //考勤统计
        findattendanceStatistics(){
            axios.post("/api/manager/attendance/queryAttendanceStatistics",this.formInline)
                .then((res) => {
                    console.log(res)
                    this.att = res.data.data;
                })

        },
        //考勤时间设置
        findattendance() {

        },
        //添加规则
        addgz() {

        },
        //重置
        onReset() {
            this.formInline.approvalStatus = "";
            this.formInline.approvalDate = "";
            this.formInline.leaveDate = "";
            this.formInline.teacherType = "";
            this.findTeacherAttendancePagination();
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.findTeacherAttendancePagination();
        },
        handleCurrentChange(val) {
            console.log(val);
            this.pageNum = val;
            this.findTeacherAttendancePagination();
        },
    }

}
</script>